import React, { Component } from 'react'
import { Button, Form, Input, Space, Switch } from 'antd'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheDialog from '@/components/TheDialog'
import TheButton from '@/components/TheButton'
import { apiExpressagePage, apiExpressageAdd, apiExpressageEdit, apiExpressageDel, apiExpressageEditStatus } from '@/request/mallSettings'

export default class Courier extends Component {
  state = {
    columns: [
      {
        title: '快递公司名称',
        dataIndex: 'expressageCompanyName',
        key: 'expressageCompanyName'
      },
      {
        title: '快递公司编码',
        dataIndex: 'expressageCompanyCode',
        key: 'expressageCompanyCode'
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text, record) => {
          return <Switch checked={record.status === 'Y'} onChange={e => this.switchChange(record.status, record.expressageCompanyId)} />
        }
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton onClick={() => this.dailogEdit(record)}>修改</TheButton>
            <TheButton onClick={() => this.delConfirm(record)}>删除</TheButton>
          </>
        }
      },
    ],
    dataSource: [1],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    loading: false,
    type: '',
    title: '',
    visible: '',
    editValue: {}
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { pageData } = this.state
    this.setState({ loading: true })
    let res = await apiExpressagePage({ ...pageData })
    if (res.code === 0 && res.data) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
    this.setState({ loading: false })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }
  dialogAdd = () => {
    this.setState({
      visible: true,
      title: '添加快递公司',
      type: 'add'
    })
  }
  dailogEdit = (editValue) => {
    this.setState({
      visible: true,
      title: '修改快递公司',
      type: 'edit',
      editValue
    })
  }
  dialogClose = () => {
    this.setState({
      visible: false,
      title: '',
      type: '',
      editValue: {}
    })
  }
  delConfirm = val => {
    React.$confirm({
      title: '您确认删除此快递公司吗？',
      onOk: async () => {
        let res = await apiExpressageDel({ expressageCompanyId: val.expressageCompanyId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }
  switchChange = (status, expressageCompanyId) => {
    React.$confirm({
      title: `您确认${status === 'Y' ? '禁用' : '启用'}此快递吗？`,
      onOk: async () => {
        let res = await apiExpressageEditStatus({ status: status === 'Y' ? 'N' : 'Y', expressageCompanyId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: `${status === 'Y' ? '禁用' : '启用'}成功`
          })
          this.getData()
        }
      }
    })
  }
  dialogSave = async value => {
    const { type, editValue } = this.state
    if (type === 'add') {
      let res = await apiExpressageAdd({ ...value })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
      }
      this.dialogClose()
      this.getData()
    }
    if (type === 'edit') {
      const { expressageCompanyId } = editValue
      let res = await apiExpressageEdit({ expressageCompanyId, ...value })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
      }
      this.dialogClose()
      this.getData()
    }
  }
  render() {
    const { columns, dataSource, loading, pageData: { pageNo, pageSize }, total, editValue, visible, title, type } = this.state
    return (
      <div className='p-layout-box'>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <TheButton type="default" size="middle" onClick={this.dialogAdd}>添加</TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
        <TheDialog
          visible={visible}
          title={title}
          footer={null}
          width={400}
          handleCancel={this.dialogClose}
        >
          <Form onFinish={this.dialogSave} initialValues={editValue}>
            <Form.Item label="名称" name="expressageCompanyName" rules={[{ required: true }]}>
              <Input placeholder='请输入快递公司名称' />
            </Form.Item>
            <Form.Item label="编码" name="expressageCompanyCode" rules={[{ required: true }]} >
              <Input placeholder='请输入快递公司编码' disabled={type === 'edit'}/>
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.dialogClose}>取消</Button>
                  <Button type='primary' htmlType='submit'>确认</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    )
  }
}
